import { Cell, Picker } from "@nutui/nutui-react-taro";
import { ArrowRight } from "@nutui/icons-react-taro";

export default function CusPicker(props) {
  const { pickerOptions, setValue, cref } = props;
  return (
    <Picker
      ref={cref}
      options={[pickerOptions]}
      onConfirm={(list, values) => {
        if (setValue) {
          setValue(values[0]);
        }
      }}
    >
      {(value: any) => {
        return (
          <Cell
            style={{
              padding: 0,
              "--nutui-cell-divider-border-bottom": "0",
            }}
            className="nutui-cell--clickable"
            title={
              value.length
                ? pickerOptions.filter((po) => po.value === value[0])[0]?.text
                : pickerOptions[0]?.text
            }
            extra={<ArrowRight />}
            align="center"
          />
        );
      }}
    </Picker>
  );
}
